<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form id="registerForm">
    <p>用户名<input name="username" onblur="checkUsername()" id="name"><span id="uname"></span></p>
    <p>密码<input name="password" onblur="checkPassword()" id="pwd"><span id="upwd"></span></p>
    <p>确认密码<input name="upass" onblur="checkUpass()" id="upass"><span id="ups"></span> </p>
    <p><input type="button" value="注册" id="btn"> </p>
</form>
<script>
    //检查用户名函数
    function checkUsername(){
//一个用户名文本框是否为空
        var name = $("#name").val();
        if(name==null || name.length==0){
            $("#uname").text("用户名不能为空")
            return;
        }
    //     一个用户名是否已经存在
        $.ajax({
            url:'/user/checkUsernameHad',
            data:'username='+name,
            dataType:'json',
            success:function (data){
                console.log(data)
                console.log(typeof (data))
                if(data==20000){
                    $("#uname").text(data.message);
                }else{
                    $("#uname").text('');
                }

            }
        })
    }
    //检查密码
    function checkPassword(){
        let password = $("#pwd").val();
        if(password==null || password.length==0 ){
            $("#pwd").text("密码不能为空");
        }
    }
    function checkUpass(){
        let upass = $("#upass").val();
        let password = $("#pwd").val();
        if(password !=upass){
            $("#ups").text("两次密码不一致")
        }else{
            $("#ups").text("")
        }
    }

    $("#btn").click(function (){
        //户直接点击注册按钮没有触发页面中文本框的失去焦点事件

        $.ajax({
            url:'/user/register',
            data:$("#registerForm").serialize(),//将表单数据用键值对方式送到后台
            dataType: 'json',
            success:function (data){
                if(data.code==40000){
                    $("#uname").text(data.massage);
                    return;
                }
                if(data.code==40001){
                    $("#uname").text("用户名不能为空");
                    return;
                }
                if(data.code==40002){
                    $("#upass").text("密码不能为空");
                    return;
                }
                if(data.code == 40003){
                    $("#ups").text('两次密码不一致');
                }
                if(data.code==20000){
                    location.href='loginn.html';//相当于超链接
                }
            }
        })
    })
</script>
</body>
</html>